import {Link} from 'react-router-dom'
import { Row, Col, Menu } from 'antd';
import { PlayCircleOutlined,HomeOutlined, CoffeeOutlined, RadarChartOutlined } from '@ant-design/icons';


import './header.less'
const { SubMenu } = Menu;


const MyHeader = () => {

    const handleClick = ()=>{

    }
    return (
        <Row  className='header'>
            <Col xs={{ span: 22, offset: 1 }} lg={{ span: 13, offset: 2 }}>
                <span className='logo'>前端小飞</span>
                <span className='motto' >专注前端开发，向全栈发展</span>
            </Col>
            <Col xs={{ span:0 }} lg={{ span: 8, offset: 1 }}>
                <Menu onClick={handleClick}  mode="horizontal" className='menu' defaultSelectedKeys='blog_main'>
                    <Menu.Item key="blog_main" icon={<HomeOutlined/>} className='menuItem'>
                        <Link to='/'>博客首页</Link>    
                    </Menu.Item>
                    <Menu.Item key="video"  icon={<PlayCircleOutlined /> } className='menuItem'>
                        <Link to='/video'>视频教程</Link>
                    </Menu.Item>
                    <Menu.Item key="skill" icon={<RadarChartOutlined />} className='menuItem' >
                        <Link to='/skill'>软件技能</Link>
                    </Menu.Item>
                    <Menu.Item key="life"  icon={<CoffeeOutlined />} className='menuItem'>
                        <Link to='/life'>快乐生活</Link>
                    </Menu.Item>
                </Menu>
            </Col>
        </Row>
    )
}
export default MyHeader